<template>
    <div class="container">
      <Breadcrumb :items="['menu.list', 'menu.product.attributeValue.list']" />
      <a-card class="general-card" :title="$t('menu.product.attributeValue.list')">
  
        <!-- 头部区域 -->
        <div class="header">
          
          <!-- 操作栏 -->
          <div class="header-operation">
            <a-row>
              <a-col :span="16">
                <a-space>
                  <a-button v-permission="['product:attributeValue:add']" type="primary" @click="toAdd">
                    <template #icon><icon-plus/></template>新增
                  </a-button>
  
                  <a-button
                      v-permission="['product:attributeValue:update']"
                      type="primary"
                      status="success"
                      :disabled="single"
                      :title="single ? '请选择一条要修改的数据' : ''"
                      @click="toUpdate(checkedIds[0])"
                  >
                    <template #icon><icon-edit /></template>修改
                  </a-button>
                  <a-button
                      v-permission="['product:attributeValue:delete']"
                      type="primary"
                      status="danger"
                      :disabled="multiple"
                      :title="multiple ? '请选择要删除的数据' : ''"
                      @click="handleBatchDelete"
                  >
                    <template #icon><icon-delete /></template>删除
                  </a-button>
                  <a-button
                      v-permission="['product:attributeValue:export']"
                      :loading="exportLoading"
                      type="primary"
                      status="warning"
                      @click="handleExport"
                  >
                    <template #icon><icon-download /></template>导出
                  </a-button>
                </a-space>
              </a-col>
              <a-col :span="8">
                <right-toolbar v-model:show-query="showQuery" @refresh="fetchData"/>
              </a-col>
            </a-row>
          </div>
        </div>
  
  
        <a-table
            row-key="id"
            :data="attributeValueList"
            :loading="loading"
            :pagination="{
                showTotal: true,
                showPageSize: true,
                total: total,
                current: queryParams.page,
              }"
            :bordered="false"
            :size="size"
            @page-change="handlePageChange"
            @page-size-change="handlePageSizeChange"
            @selection-change="handleSelectionChange"
            :row-selection="{
                type: 'checkbox',
                showCheckedAll: true,
                onlyCurrent: false,
              }"
        >
  
          <template #columns>
            <a-table-column title="ID" data-index="id" :width="30" />
            <a-table-column title="值" data-index="value" :width="100" />
  
            <a-table-column title="创建时间" :width="100">
              <template #cell="{ record }">
                {{ record.createdAt }}
              </template>
            </a-table-column>
  
            <a-table-column title="操作" align="center" fixed="right" :width="100">
  
              <template #cell="{ record }">
  
  
                <a-button
                    v-permission="['product:attributeValue:update']"
                    type="text"
                    size="small"
                    title="修改"
                    @click="toUpdate(record.id)"
                >
                  <template #icon><icon-edit /></template>修改
                </a-button>
  
                <a-popconfirm
                    content="确定删除吗？"
                    type="warning"
                    @ok="handleDelete([record.id])"
                >
                  <a-button
                      v-permission="['product:attributeValue:delete']"
                      type="text"
                      size="small"
                      title="删除"
                      :disabled="record.disabled"
                  >
                    <template #icon><icon-delete /></template>删除
                  </a-button>
                </a-popconfirm>
              </template>
  
            </a-table-column>
          </template>
  
  
        </a-table>
      </a-card>
  
  
  
  
      <!-- 表单区域 -->
      <a-drawer :title="title" :visible="visible" :width="690" :mask-closable="false" unmount-on-close
          render-to-body @ok="handleOk" @cancel="handleCancel"
      >
      <a-form ref="formRef" :model="attributeValueSaveForm" :rules="rules" :label-col-style="{ width: '94px' }"
            size="large" layout="inline" auto-label-width >
  
          <a-form-item label="值" field="value">
            <a-input
                v-model="attributeValueSaveForm.value"
                placeholder="请输入组件名"
                style="width: 500px"
            />
          </a-form-item>
        </a-form>
      </a-drawer>
  
  
      <a-drawer
          title="组件详情"
          :visible="detailVisible"
          :width="700"
          :footer="false"
          unmount-on-close
          render-to-body
          @cancel="handleDetailCancel"
      >
        <a-descriptions :column="1" bordered size="large">
  
          <a-descriptions-item label="值">
            <a-skeleton v-if="detailLoading" :animation="true">
              <a-skeleton-line :rows="1" />
            </a-skeleton>
            <span v-else>{{ attributeValue.value }}</span>
          </a-descriptions-item>
  
          <a-descriptions-item label="创建者">
            <a-skeleton v-if="detailLoading" :animation="true">
              <a-skeleton-line :rows="1" />
            </a-skeleton>
            <span v-else>{{ attributeValue.createdBy }}</span>
          </a-descriptions-item>
  
  
          <a-descriptions-item label="更新者">
            <a-skeleton v-if="detailLoading" :animation="true">
              <a-skeleton-line :rows="1" />
            </a-skeleton>
            <span v-else>{{ attributeValue.updatedBy }}</span>
          </a-descriptions-item>
  
          <a-descriptions-item label="创建时间">
            <a-skeleton v-if="detailLoading" :animation="true">
              <a-skeleton-line :rows="1" />
            </a-skeleton>
            <span v-else>{{ attributeValue.createdAt }}</span>
          </a-descriptions-item>
  
          <a-descriptions-item label="更新时间">
            <a-skeleton v-if="detailLoading" :animation="true">
              <a-skeleton-line :rows="1" />
            </a-skeleton>
            <span v-else>{{ attributeValue.updatedAt }}</span>
          </a-descriptions-item>
  
        </a-descriptions>
      </a-drawer>
  
    </div>
  
  
  
  </template>
  
  <script lang="ts" setup>
    import {getCurrentInstance, reactive, ref, toRefs} from 'vue';
    import {useI18n} from 'vue-i18n';
    import useLoading from '@/hooks/loading';
    import {PolicyRecord} from '@/api/list';
    import {
      addAttributeValue,
      getAttributeValue,
      updateAttributeValue,
      deleteAttributeValue,
      AttributeValueSaveCommand,
      AttributeValueParam,
      AttributeValueResponse,
      pageAttributeValue
    } from "@/api/product/attributeValue";
  
    import { onBeforeUnmount, shallowRef } from 'vue'
    import { Boot } from '@wangeditor/editor'
    import markdownModule from '@wangeditor/plugin-md'
    import { useRouter, useRoute } from 'vue-router'  
  
    const showQuery = ref(true);
    Boot.registerModule(markdownModule)
  
  
  
  
    type SizeProps = 'mini' | 'small' | 'medium' | 'large';
    const { proxy } = getCurrentInstance() as any;
    const { loading, setLoading } = useLoading(true);
    const { t } = useI18n();
    const renderData = ref<PolicyRecord[]>([]);
  
    const size = ref<SizeProps>('medium');
    const checkedIds = ref<Array<number>>([]);
    const title = ref('');
    const single = ref(true);
    const multiple = ref(true);
  
    const data = reactive({
      queryParams: {
        attributeValueName: undefined,
        page: 1,
        size: 10,
        sort: ['createdAt,desc'],
      },
      attributeValueSaveForm: {} as AttributeValueSaveCommand,
      rules: {
        username: [{ required: true, message: '请输入管理员组件名' }],
        password: [{ required: true, message: '请输入管理员密码' }]
      },
  
    });
    const { queryParams, attributeValueSaveForm, rules } = toRefs(data);
  
    const attributeValueList = ref<AttributeValueResponse[]>([]);
    const total = ref(0);
  
    const attributeValue = ref<AttributeValueResponse>({
      id: undefined,
      keyId: undefined,
      value: '',
      createdBy: '',
      updatedBy: '',
      createdAt: '',
      updatedAt: ''
    });
  
    const router = useRouter();
    const route = useRoute();
    const fetchData = (params: AttributeValueParam = {...queryParams.value}) => {
      setLoading(true);
      const { id = 0 } = route.query;
      params.keyId = id;
      pageAttributeValue(params).then(res => {
        attributeValueList.value = res.data.list;
        total.value = Number(res.data.total);
      }).finally(() => {
        setLoading(false);
      });
  
    };
  
    fetchData();
    const reset = () => {
      attributeValueSaveForm.value = {
        id: undefined,
        keyId: undefined,
        value: '',
      };
      proxy.$refs.formRef?.reserFields();
    };
  
    const visible = ref(false);
    const toAdd = () => {
      reset();
      title.value = '新增组件';
      visible.value = true;
    };
  
  
    const toUpdate = (id: number) => {
      reset();
      getAttributeValue(id).then((res) => {
        attributeValueSaveForm.value = res.data as unknown as AttributeValueSaveCommand;
        title.value = '修改组件';
        visible.value = true;
      });
    };
  
  
    const handleQuery = () => {
      console.log("handleQuery", queryParams);
      fetchData();
    };
  
    const resetQuery = () => {
      proxy.$refs.queryRef.resetFields();
      handleQuery();
    };
  
    const handlePageChange = (current: number) => {
      queryParams.value.page = current;
      fetchData();
    };
  
    const handlePageSizeChange = (pageSize: number) => {
      queryParams.value.size = pageSize;
      fetchData();
    };
  
    const handleSelectionChange = (rowKeys: Array<any>) => {
      checkedIds.value = rowKeys;
      single.value = rowKeys.length !== 1;
      multiple.value = !rowKeys.length;
    };
  
  
    const handleCancel = () => {
      visible.value = false;
      proxy.$refs.formRef?.resetFields();
      proxy.$refs.userRoleFormRef?.resetFields();
    };
  
    const handleOk = () => {
      proxy.$refs.formRef.validate((valid: any) => {
        const { id = 0 } = route.query;
        attributeValueSaveForm.value.keyId = id;
        if (!valid) {
          if (attributeValueSaveForm.value.id !== undefined) {
            updateAttributeValue(attributeValueSaveForm.value).then((res:any) => {
              handleCancel();
              fetchData();
              proxy.$message.success(res.message);
            });
          } else {
            addAttributeValue(attributeValueSaveForm.value).then((res:any) => {
              handleCancel();
              fetchData();
              proxy.$message.success(res.message);
            });
          }
        }
      });
    };
  
    const handleDelete = (ids: Array<number>) => {
      deleteAttributeValue(ids).then((res:any) => {
        proxy.$message.success(res.message);
        fetchData();
      });
    };
  
    const detailLoading = ref(false);
    const detailVisible = ref(false);
    const toDetail = async (id: number) => {
      if (detailLoading.value) return;
      detailLoading.value = true;
      detailVisible.value = true;
      getAttributeValue(id)
          .then((res) => {
            attributeValue.value = res.data;
          })
          .finally(() => {
            detailLoading.value = false;
          });
    };
  
    const handleDetailCancel = () => {
      detailVisible.value = false;
    };
  
    const handleBatchDelete = () => {
      if(checkedIds.value.length === 0) {
        proxy.$message.info('没有选中数据');
      }else {
        proxy.$modal.warning({
          title: '警告',
          titleAlign: "start",
          content: '确定删除吗？',
          hideCancel: false,
          onOk: () => {
            handleDelete(checkedIds.value);
          }
        });
      }
    }
  
    const exportLoading = ref(false);
    const handleExport = () => {
      if(exportLoading.value) return;
  
      exportLoading.value = true;
      proxy
          .download('/admin/product/attributeValue/export', { ...queryParams.value }, '组件数据')
          .finally(() => {
            exportLoading.value = false;
          });
  
    }
  
  
  
  
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
  
    const editorConfig = { placeholder: '请输入内容...' }
  
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })
  
  
  
  </script>
  
  <script lang="ts">
  export default {
    name: 'SearchTable'
  };
  </script>
  
  <style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  
  .header {
    padding-bottom: 10px;
  }
  </style>
  